﻿//PictureBox控件，继承自Control控件，需要tools.js、proto.js、Animate.js模块，Control基类

if (!window.wkh.classes) {
    window.wkh.classes = {
        controls: {}
    };
}

if (!window.wkh.classes.controls) {
    window.wkh.classes.controls = {};
}

wkh.classes.controls.PictureBox = (function () {
    var base = wkh.classes.controls.Control;//基类
    var basePro = base.prototype;//基类原型

    var pictureBoxNum = 0;//button数量

    var pri;//私有变量

    function initBase(initObj, div, width, height, name, style) {
        this.__wkh_private_getButtonPrivate = function () {
            pri = privateVar;
        };

        var preN = base.getNum();
        base.call(initObj, div, width, height, name, style);
        var nowN = base.getNum();
        if (nowN > preN) {
            ++pictureBoxNum;
        }
    }

    var style = {
        lightgray: [
        {},//divStyle
        "lightskyblue",//backgroundColor
        "gray"//coverBackgroundColor
        ]
    };

    function classPictureBox(div,setting) {//setting:style,width,height,name,zoom,text,url,orientation
        this.__wkh_private_getPictureBoxPrivate = function () {
            pri = privateVar;
        };

        setting = setting || {};
        if (!setting.style) {
            setting.style = "lightgray";
        }

        switch (setting.style) {
            case "lightgray":
                setting.style = style.lightgray;
                break;

            default:
                break;
        }

        var privateVar = {
            name: setting.name || "PictureBox",
            backgroundColor: setting.style[1] || "",
            coverBackgroundColor: setting.style[2] || "",
            pictureUrl: setting.url,
            zoom: setting.zoom || "none",//"height","width","none",数值
            orientation: setting.orientation || "bottom",//"left","right","top","bottom"
            text: setting.text || ""
        };

        initBase(this, div, setting.width, setting.height, privateVar.name, setting.style[0] || {});
        div.getClassList().add("__wkh_private_Button");

        if (div.css("position") === "static") {
            div.css({position:"relative"})
        }
        div.css({
            backgroundColor: privateVar.backgroundColor,
            boxSizing: "border-box",
            overflow: "hidden"
        });

        if (!privateVar.pictureUrl) {
            div.innerText = privateVar.text;
            div.css("padding", "10px");
        } else {
            var img = document.createElement("img");
            img.setAttribute("title", privateVar.text);
            img.setAttribute("alt", privateVar.text);
            img.setAttribute("src", privateVar.pictureUrl);

            var width = div.css("width");
            var height = div.css("height");
            switch (privateVar.zoom) {
                case "height":
                    if (height !== "0px") {
                        img.css("height", height);
                    }
                    break;
                case "width":
                    if (width !== "0px") {
                        img.css("width", width);
                    }
                    break;
                case "none":
                    break;
                default:
                    img.css("width", privateVar.zoom);
                    break
            }

            div.appendChild(img);
        }

        var coverDiv = document.createElement("div");
        var color = wkh.tools.analyticColor(privateVar.coverBackgroundColor);

        var opacity = 0.5;

        var colorOth = "rgba(" + color.join(",") + "," + opacity + ")";
        color.unshift(Math.round(opacity * 255));
        color.forEach(function (val,i,arr) {
            arr[i] = val.toString(16);
            if (arr[i].length === 1) {
                arr[i] = "0" + arr[i];
            }
        });
        var colorIE = "#" + color.join("");

        coverDiv.css({
            width: "100%",
            height: "100%",
            boxSizing: "border-box",
            padding: "2px",
            margin: 0,
            position: "absolute",
            backgroundColor: colorOth,
            filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr=" + colorIE + ",endColorStr=" + colorIE + ")"
        });

        var animate;
        switch (privateVar.orientation) {
            case "left":
                coverDiv.css({ right: "100%", top: 0 });
                animate = new wkh.classes.Animate(coverDiv, "right");
                break;
            case "right":
                coverDiv.css({ left: "100%", top: 0 });
                animate = new wkh.classes.Animate(coverDiv, "left");
                break;
            case "top":
                coverDiv.css({ bottom: "100%", left: 0 });
                animate = new wkh.classes.Animate(coverDiv, "bottom");
                break;
            case "bottom":
                coverDiv.css({ top: "100%", left: 0 });
                animate = new wkh.classes.Animate(coverDiv, "top");
                break;
            default:
                break;
        }

        animate.animateSelf(100, 0, function (arg) {
            return arg[0] + "%";
        });
        animate.changeTime(250);
        coverDiv.innerText = privateVar.text;

        div.appendChild(coverDiv);

        div.addEventListener("mouseenter", function () {
            animate.doAnimate();
        });
        div.addEventListener("mouseleave", function () {
            animate.doAnimate(true);
        });
    }

    classPictureBox.prototype = Object.create(basePro);
    classPictureBox.prototype.className = "PictureBox";

    //...

    classPictureBox.prototype.getNum = function () {
        return pictureBoxNum;
    };
    classPictureBox.__wkh_private_className = "PictureBox";

    return classPictureBox;
}());